<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<body>
    <!-- 访客主页内容片段 -->
    <div th:fragment="guest-content" class="guest-home">
        <!-- 功能介绍 -->
        <div class="row mb-5">
            <div class="col-12 text-center mb-4">
                <h2 class="fw-bold">为什么选择我们？</h2>
                <p class="text-muted">科学的营养管理，让健康生活更简单</p>
            </div>
            
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card h-100 text-center border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-robot fa-3x text-primary"></i>
                        </div>
                        <h5 class="card-title">AI智能推荐</h5>
                        <p class="card-text text-muted">
                            基于您的饮食偏好和营养需求，AI算法为您推荐最适合的菜品搭配，
                            让每一餐都营养均衡。
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card h-100 text-center border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-chart-pie fa-3x text-success"></i>
                        </div>
                        <h5 class="card-title">营养分析</h5>
                        <p class="card-text text-muted">
                            详细记录每日营养摄入，实时分析营养结构，
                            帮助您了解饮食状况，科学调整饮食习惯。
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card h-100 text-center border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-bullseye fa-3x text-warning"></i>
                        </div>
                        <h5 class="card-title">目标管理</h5>
                        <p class="card-text text-muted">
                            设定个人营养目标，系统自动跟踪进度，
                            提供专业建议，助您达成健康目标。
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card h-100 text-center border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-bell fa-3x text-info"></i>
                        </div>
                        <h5 class="card-title">智能提醒</h5>
                        <p class="card-text text-muted">
                            营养摄入异常时及时预警，提醒您调整饮食，
                            避免营养不良或营养过剩。
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card h-100 text-center border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-mobile-alt fa-3x text-danger"></i>
                        </div>
                        <h5 class="card-title">移动便捷</h5>
                        <p class="card-text text-muted">
                            响应式设计，支持手机、平板等多种设备，
                            随时随地管理您的营养健康。
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card h-100 text-center border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-shield-alt fa-3x text-secondary"></i>
                        </div>
                        <h5 class="card-title">数据安全</h5>
                        <p class="card-text text-muted">
                            采用先进的数据加密技术，保护您的隐私信息，
                            让您安心使用我们的服务。
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 使用流程 -->
        <div class="row mb-5">
            <div class="col-12 text-center mb-4">
                <h2 class="fw-bold">简单三步，开启健康生活</h2>
                <p class="text-muted">注册即可享受专业的营养管理服务</p>
            </div>
            
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="text-center">
                    <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" 
                         style="width: 60px; height: 60px;">
                        <span class="fs-4 fw-bold">1</span>
                    </div>
                    <h5>注册账户</h5>
                    <p class="text-muted">
                        填写基本信息，设置您的营养目标，
                        系统将为您量身定制营养方案。
                    </p>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="text-center">
                    <div class="step-number bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" 
                         style="width: 60px; height: 60px;">
                        <span class="fs-4 fw-bold">2</span>
                    </div>
                    <h5>记录饮食</h5>
                    <p class="text-muted">
                        选择菜品，记录每餐摄入，
                        系统自动计算营养成分和热量。
                    </p>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="text-center">
                    <div class="step-number bg-warning text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" 
                         style="width: 60px; height: 60px;">
                        <span class="fs-4 fw-bold">3</span>
                    </div>
                    <h5>获得建议</h5>
                    <p class="text-muted">
                        查看营养分析报告，获得个性化建议，
                        持续优化您的饮食结构。
                    </p>
                </div>
            </div>
        </div>

        <!-- 数据展示 -->
        <div class="row mb-5">
            <div class="col-12 text-center mb-4">
                <h2 class="fw-bold">用户信赖的选择</h2>
                <p class="text-muted">数据说话，见证我们的专业</p>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="text-center">
                    <div class="display-4 fw-bold text-primary mb-2">1000+</div>
                    <h5>注册用户</h5>
                    <p class="text-muted">越来越多的用户选择我们</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="text-center">
                    <div class="display-4 fw-bold text-success mb-2">500+</div>
                    <h5>菜品数据库</h5>
                    <p class="text-muted">丰富的菜品营养数据</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="text-center">
                    <div class="display-4 fw-bold text-warning mb-2">95%</div>
                    <h5>用户满意度</h5>
                    <p class="text-muted">专业服务获得用户认可</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="text-center">
                    <div class="display-4 fw-bold text-info mb-2">24/7</div>
                    <h5>全天候服务</h5>
                    <p class="text-muted">随时为您的健康保驾护航</p>
                </div>
            </div>
        </div>

        <!-- 行动号召 -->
        <div class="row">
            <div class="col-12">
                <div class="card bg-gradient-primary text-white text-center">
                    <div class="card-body py-5">
                        <h2 class="fw-bold mb-3">开始您的健康之旅</h2>
                        <p class="lead mb-4">
                            加入我们，让AI为您的营养健康保驾护航，
                            科学饮食，从今天开始！
                        </p>
                        <div class="d-flex justify-content-center gap-3">
                            <a th:href="@{/register}" class="btn btn-light btn-lg">
                                <i class="fas fa-user-plus me-2"></i>立即注册
                            </a>
                            <a th:href="@{/login}" class="btn btn-outline-light btn-lg">
                                <i class="fas fa-sign-in-alt me-2"></i>用户登录
                            </a>
                        </div>
                        <div class="mt-4">
                            <small class="opacity-75">
                                已有账户？<a th:href="@{/login}" class="text-white text-decoration-underline">直接登录</a>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
